﻿<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#"></a>
        </li>
    </ul>
</div>
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <table id="${TableName}_grid"></table>
            <div id="${TableName}_grid_pager"></div>
            <div id="${TableName}_toolBar" style="display: none;">
                <div style="margin-right: 10px;" class="pull-left">
                    <input id="d_imei" name="d_imei" type="text" placeholder="序列号" />
                </div>
                <div style="margin-right: 10px;" class="pull-left">
                    <input id="d_user_name" name="d_user_name" type="text" placeholder="用户姓名" />
                </div>
                @*<div style="margin-right: 10px;" class="pull-left">
                        <input id="d_sw_phone" name="d_sw_phone" type="text" placeholder="联系号码" />
                    </div>*@
                <div style="margin-right: 10px;" class="pull-left">
                    <button onclick="${TableName}Query();" class="btn btn-xs btn-success">
                        <i class="ace-icon fa fa-search"></i>
                        查询
                    </button>
                    <button onclick="reset${TableName}Filter();" class="btn btn-xs btn-lighter">
                        <i class="ace-icon fa fa-refresh"></i>
                        重置
                    </button>
                    <button onclick="BindWatch();" class="btn btn-xs btn-info">
                        <i class="ace-icon fa fa-lock"></i>
                        绑定
                    </button>
                    <button onclick="delete${TableName}Bind();" class="btn btn-xs btn-danger">
                        <i class="ace-icon fa fa-unlock"></i>
                        解绑
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 增加${table.comment} -->
<div id="dlgAdd${TableName}Div" style="display:none;">
    <div id="dlgAdd${TableName}">
        @using (Ajax.BeginForm("Add${TableName}", "${ClassName}", null, new AjaxOptions { HttpMethod = "POST", OnFailure = "alert('error')", OnSuccess = "callbackAdd${TableName}(data);" }, new { @class = "form-horizontal", id = "add${TableName}Form" }))
        {
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="col-md-3 control-label">设备IMEI</label>
                        <div class="col-md-6">
                            @Html.TextBox("imei", null, new { @class = "form-control  {required:true,messages:{required:'请填写设备序列号'}} ", placeholder = "请填写设备序列号" })
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">备注</label>
                        <div class="col-md-6">
                            @Html.TextBox("comment", null, new { @class = "form-control ", placeholder = "请填写备注" })
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

<!--grid-->
<script type="text/javascript">
    var ${TableName}_grid = "#${TableName}_grid";
    var ${TableName}_grid_pager = "#${TableName}_grid_pager";
    var ${TableName}_toolBar = "#${TableName}_toolBar";

    var parent_column = $(${TableName}_grid).closest('[class*="col-"]');
    $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
        if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
            //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
            setTimeout(function () {
                $(${TableName}_grid).jqGrid('setGridWidth', parent_column.width());
            }, 0);
        }
    });

     jQuery(${TableName}_grid).jqGrid({
            url: "/${ClassName}/${ClassName}Filter",
            mtype: "POST",
            datatype: "json",
            height: $(window).height() - globalHeight1,
            rownumbers: true,
            colNames: ['ID', 'relation_id', '设备类型', '序列号', '绑定用户', '更新时间', '备注'],
            colModel: [
                { name: 'id', index: 'id', width: 60, sortable: false, hidden: true },
                { name: 'relation_id', index: 'relation_id', width: 60, hidden: true },
                { name: 'model', index: 'model', width: 30, sortable: false },
                { name: 'imei', index: 'imei', width: 60, sortable: false },
                { name: 'user_name', index: 'user_name', width: 60, sortable: false },
                { name: 'submit_time', index: 'submit_time', width: 60, sortable: false, formatter: 'date', formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } },
                { name: 'comment', index: 'comment', width: 60, sortable: false }
            ],
            rowNum: 15,
            rowList: [15, 20, 30],
            pager: ${TableName}_grid_pager,
            toolbar: [true, "top"],
            viewrecords: true,
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    updatePagerIcons(table);
                }, 0);
                $(${TableName}_grid).jqGrid('setGridWidth', $(".page-content").width());
            },
            caption: "${table.comment}列表",
            autowidth: true,
            ondblClickRow: function (rowid, iRow, iCol, e) {

            }
        });

    //navButtons
    var navButtons = jQuery(${TableName}_grid).jqGrid('navGrid', ${TableName}_grid_pager, {
        del: true,
        delicon: 'ace-icon fa fa-trash-o red',
        deltitle: '删除${table.comment}',
        //add: true,
        //addicon: 'ace-icon fa fa-plus-circle purple',
        //addtitle: '添加${table.comment}',
        edit: true,
        editicon: 'ace-icon fa fa-pencil blue',
        search: false,
        refresh: true,
        refreshicon: 'ace-icon fa fa-refresh green'
    });



    //replace icons with FontAwesome icons like above
    function updatePagerIcons() {
        var replacement =
        {
            'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
            'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
            'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
            'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
        };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

            if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
        });
    }

    //工具栏
    $(${TableName}_grid.replace("#", "#t_")).html($(${TableName}_toolBar));
    $(${TableName}_toolBar).show();

    //将表格自带的添加事件取消
    $(${TableName}_grid.replace("#", "#add_")).unbind();
    //$(${TableName}_grid.replace("#", "#add_")).bind("click", function () {
    //    add${TableName}();
    //});

    //将表格自带的编辑事件取消
    $(${TableName}_grid.replace("#", "#edit_")).unbind();
    $(${TableName}_grid.replace("#", "#edit_")).bind("click", function () {
        edit${TableName}();
    });

    //将表格自带的删除事件取消
    $(${TableName}_grid.replace("#", "#del_")).unbind();
    $(${TableName}_grid.replace("#", "#del_")).bind("click", function () {
        delete${TableName}();
    });
</script>
<!--event-->
<script type="text/javascript">
    $(function () {
       
    })

    function batchImport() {
        bootbox.dialog({
            size: "custom",
            width: $(window).width() - 700,
            height: $(window).height() - 300,
            title: "批量上传",
            message: $("#uploadOldManDiv"),
            onClose: function () {
                $("#uploadOldManDlg").html($("#uploadOldManDiv"));
            },
            buttons: {
                Submit: {
                    label: "<i class='ace-icon fa fa-check bigger-110'></i>提交",
                    className: "btn-primary",
                    callback: function () {
                        myDropzone.processQueue();
                        return false;
                    }
                },
                Reset: {
                    label: '<i class="ace-icon fa fa-undo bigger-110"></i>取消',
                    className: "btn-default",
                    callback: function () {
                    }
                }
            }
        });
        $("#uploadOldManDiv").parent().css({ "position": "relative", "height": "95%" });
    }
    var add${TableName}Dlg;
    function add${TableName}() {
        $("#add${TableName}Form")[0].reset();
        add${TableName}Dlg = bootbox.dialog({
            size: "custom",
            width: $(window).width() - 1000,
            height: $(window).height() - 400,
            title: "添加${table.comment}",
            message: $("#dlgAdd${TableName}"),
            onClose: function () {
                $("#dlgAdd${TableName}Div").html($("#dlgAdd${TableName}"));
            },
            buttons: {
                Submit: {
                    label: "<i class='ace-icon fa fa-check bigger-110'></i>添加",
                    className: "btn-primary",
                    callback: function () {
                        $("#add${TableName}Form").submit();
                        return false;
                    }
                },
                Reset: {
                    label: '<i class="ace-icon fa fa-undo bigger-110"></i>重置',
                    className: "btn-default",
                    callback: function () {
                        $("#add${TableName}Form")[0].reset();
                        return false;
                    }
                }
            }
        });
    }

    var edit${TableName}Box;
    function edit${TableName}() {
        var selectedId = $(${TableName}_grid).jqGrid("getGridParam", "selrow");
        var user_name = $(${TableName}_grid).jqGrid("getCell", selectedId, "user_name");
        if (selectedId != null && selectedId != undefined) {
            edit${TableName}Box = bootbox.dialog({
                target: "Edit${TableName}Box",
                size: "custom",
                width: $(window).width() - 1000,
                height: $(window).height() - 200,
                title: "编辑${table.comment}",
                message: ' ',
                onShow: function () {
                    $.get("/${ClassName}/Edit${ClassName}", { "id": function () { return $(${TableName}_grid).jqGrid("getGridParam", "selrow") } }, function (data) {
                        $("#Edit${TableName}Box").html(data);
                    })
                },
                buttons: {
                    Submit: {
                        label: "<i class='ace-icon fa fa-check bigger-110'></i>确定",
                        className: "btn-primary",
                        callback: function () {
                            console.log($("#Edit${TableName}").length);
                            $("#Edit${ClassName}Form").submit();
                            return false;
                        }
                    },
                    Reset: {
                        label: '<i class="ace-icon fa fa-undo bigger-110"></i>取消',
                        className: "btn-default"
                    }
                }
            });
        }
        else
            bootbox.alert({ size: 'small', message: "当前无选中行" });
    }


    var selectUserFunc;
    var bind${TableName}Box;
    function BindWatch() {
        var selectedId = $(${TableName}_grid).jqGrid("getGridParam", "selrow");
        if (selectedId != null && selectedId != undefined) {
            var rowData = $(${TableName}_grid).jqGrid("getRowData", selectedId);
            var val = rowData.user_name;
            if (val != null && val != undefined && val != '') {
                bootbox.alert({
                    size: 'small',
                    message: "该设备已被绑定"
                });
                return;
            }
            bind${TableName}Box = bootbox.dialog({
                bottomSpace: false,
                target: "bind${TableName}Box",
                size: "custom",
                width: $(window).width() - 400,
                height: $(window).height() - 100,
                title: "绑定${table.comment}",
                message: ' ',
                onShow: function () {
                    $.get("/Common/GetAllUser", { "type": "@(ViewBag.type )" }, function (data) {
                        $("#bind${TableName}Box").html(data);
                    });
                }
            });
            selectUserFunc = function (id, data) {
                bootbox.confirm({
                    size: 'small',
                    message: "确定要给用户绑定该设备吗？",
                    callback: function (result) {
                        if (result) {
                            $.post("/${ClassName}/Bind${ClassName}", { user_id: id, device_id: rowData.id, type: "@(ViewBag.type )" }, function (data) {
                                bootbox.alert({ size: 'small', message: data.Msg });
                                reset${TableName}Filter();
                                if (data.Flag)
                                    bind${TableName}Box.modal('hide');
                            });
                        }
                    }
                });
            }
        }
        else
            bootbox.alert({ size: 'small', message: "当前无选中行" });
    }
    $("#change_user").click(function () {
        var dlgChangeUser = bootbox.dialog({
            bottomSpace: false,
            target: "dlgChangeUser",
            size: "custom",
            width: $(window).width() - 400,
            height: $(window).height() - 100,
            title: "选择用户",
            message: ' '
        });
        $.get("/Common/GetAllUser", { "type": "@(ViewBag.type )" }, function (data) {
            $("#dlgChangeUser").html(data);
        });
        selectUserFunc = function (id, data) {
            $("#uploadOldManDiv").find("#user_id").val(id);
            $("#uploadOldManDiv").find("#user_name").val(data.name);
            dlgChangeUser.modal('hide');
        }
    });
    function delete${TableName}() {
        var selectedId = $(${TableName}_grid).jqGrid("getGridParam", "selrow");
        if (selectedId != null && selectedId != undefined) {
            bootbox.confirm({
                size: 'small',
                message: "确定要删除${table.comment}吗？",
                callback: function (result) {
                    if (result) {
                        $.post("/${ClassName}/Delete${ClassName}", { id: selectedId }, function (data) {
                            if (!data.Flag)
                                bootbox.alert({ size: 'small', message: data.Msg });
                            else
                                reset${TableName}Filter();
                        });
                    }
                }
            });
        }
        else
            bootbox.alert({ size: 'small', message: "当前无选中行" });
    }

    function delete${TableName}Bind() {
        var selectedId = $(${TableName}_grid).jqGrid("getGridParam", "selrow");

        if (selectedId != null && selectedId != undefined) {

            var rowData = $(${TableName}_grid).jqGrid("getRowData", selectedId);
            var val = rowData.user_name;
            if (val == null || val == undefined || val == '') {
                bootbox.alert({
                    size: 'small',
                    message: "该${table.comment}尚未绑定"
                });
                return;
            }
            bootbox.confirm({
                size: 'small',
                message: "确定要解除用户和${table.comment}的绑定吗？",
                callback: function (result) {
                    if (result) {
                        $.post("/${ClassName}/DeleteBind${ClassName}", { relation_id: rowData.relation_id }, function (data) {
                            if (!data.Flag)
                                bootbox.alert({ size: 'small', message: data.Msg });
                            else
                                reset${TableName}Filter();
                        });
                    }
                }
            });
        }
        else
            bootbox.alert({ size: 'small', message: "当前无选中行" });
    }


    function ${TableName}Filter(user_name, sw_imei) {
        $(${TableName}_grid).jqGrid('setGridParam', {
            datatype: 'json',
            page: 1,
            postData: { user_name: user_name, sn: sw_imei } //发送数据
        }).trigger("reloadGrid"); //重新载入
    }

    function ${TableName}Query() {
        ${TableName}Filter($.trim($("#d_user_name").val()), $.trim($("#d_imei").val()));
    }

    function reset${TableName}Filter() {
        $("#d_user_name").val("");
        $("#d_imei").val("");
        ${TableName}Filter('', '');
    }
</script>
<!--选择用户-->
<script type="text/javascript">

    function callbackAdd${TableName}Bind(data) {
        if (data.Flag) {
            add${TableName}Bind.modal('hide');
            bootbox.alert({ size: 'small', message: "添加成功" });
            reset${TableName}Filter();
        }
        else
            bootbox.alert({ size: 'small', message: data.Msg });
    }

    function callbackAdd${TableName}(data) {
        if (data.Flag) {
            add${TableName}Dlg.modal('hide');
            bootbox.alert({ size: 'small', message: "添加成功" });
            reset${TableName}Filter();
        }
        else
            bootbox.alert({ size: 'small', message: data.Msg });
    }
</script>